<template>
  <div class="content">
    <div class="page-content">
      <div class="block">
        <div class="block-menu">
          <div class="block-menu-type">
            <div class="tab-item" :class="tabActive===0?'active':''" @click="tabActive=0">全部
            </div>
            <div class="tab-item" :class="tabActive===1?'active':''" @click="tabActive=1">待审核
            </div>
            <div class="tab-item" :class="tabActive===2?'active':''" @click="tabActive=2">未通过
            </div>
            <div class="tab-item" :class="tabActive===3?'active':''" @click="tabActive=3">开放中
            </div>
            <div class="tab-item" :class="tabActive===4?'active':''" @click="tabActive=4">关闭中
            </div>

          </div>
          <div class="btn2 menu-block-btn">
            <router-link style="color: #FFFFFF" :to="{name:'releasePosition'}">+发布职位</router-link>
          </div>
        </div>
        <div class="search-block">
          <div class="search-list">
            <el-table v-loading="tableConf.loading" :stripe="true" :border="true" :data="tableData">
              <el-table-column align="center" prop="jobTitle" label="职位名称" />
              <el-table-column width="80" align="center" prop="levelName" label="类型">
                <template slot-scope="{row}">{{row.recruitType===1?'全职':'兼职'}}</template>
              </el-table-column>
              <el-table-column width="80" align="center" prop="pname" label="投递数" />
              <el-table-column width="120" align="center" prop="recruitStateText" label="状态" />
              <el-table-column align="center" label="操作">
                <template slot-scope="{row}">
                  <router-link :to="{path:'/enterprise/position/release-position',query:{id:row.id}}"><el-button size="mini" icon="el-icon-edit" type="primary" style="margin-right: 10px">编辑</el-button></router-link>
                  <el-button v-if="row.recruitState===3" size="mini" icon="el-icon-lock" type="primary" @click="handleOperation(1,row.id)">关闭</el-button>
                  <el-button v-if="row.recruitState===4" size="mini" icon="el-icon-unlock" type="primary" @click="handleOperation(2,row.id)">开放</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-row style="margin-top: 20px">
              <el-pagination
                  background
                  :page-sizes="tableConf.sizes"
                  :page-size="tableConf.size"
                  :total="tableConf.total"
                  :current-page="tableConf.page"
                  layout="total, sizes, prev, pager, next"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
              />
            </el-row>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import {doClosePublish, doOpenPublish, getMyPublish} from "@/api/position";

export default {
  name: "PositionManagement",
  data() {
    return {
      position:[],
      tabActive:0,
      tableData:[],
      tableConf: {
        page: 1,
        sizes: [10, 20, 50, 100],
        total: 0,
        size: 10,
        loading: false
      }
    }
  },
  methods: {
    handleOperation(type,id){
      this.$confirm('确定该操作吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
        const loading=this.$loading({text:'加载中'})
        if(type===1){
          doClosePublish({postId:id}).then(()=>{
            this.$message.success('关闭成功');
            this.getTableList();
          }).finally(()=>{
            loading.close()
          })
        }else{
          doOpenPublish({postId:id}).then(()=>{
            this.$message.success('开放成功');
            this.getTableList();
          }).finally(()=>{
            loading.close()
          })
        }
      })
    },
    // 每页显示数量change
    handleSizeChange(e) {
      this.tableConf.size = e
      this.getTableList()
    },
    // 当前页change
    handleCurrentChange(e) {
      this.tableConf.page = e
      this.getTableList()
    },
    getTableList() {
      this.tableConf.loading = true
      getMyPublish({ page: this.tableConf.page, limit: this.tableConf.size,recruitState:this.tabActive }).then((res) => {
        this.tableData = res.list
        this.tableConf.total = res.count
      }).finally(()=>{
        this.tableConf.loading=false
      })
    },
  },
  watch: {
    tabActive:{
      handler(){
        this.tableConf.page=1;
        this.getTableList()
      },
      immediate:true
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;

  .page-content {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    min-height: $fullMinHeight;

    .block {
      background-color: #fff;
      height: auto;
      border-radius: 5px;
      margin-bottom: 30px;

      .block-menu {
        border-bottom: #e4e4e4 1px solid;
        margin: 20px 20px 0 20px;
        display: flex;
        flex-direction: row;

        .block-menu-type {
          display: flex;
          width: 85%;
        }

        .menu-block-btn {
          width: 150px;
          height: 35px;
          border-radius: 10px;
        }

        .tab-item {
          font-size: 16px;
          width: 100px;
          height: 50px;
          line-height: 30px;
          text-align: center;
          cursor: pointer;
        }

        .tab-item.active {
          border-bottom: 3px solid $orange;
          color: $orange;
        }
      }

      .search-block {
        padding: 20px;
        display: flex;
        flex-direction: column;

        .search-item {
          display: flex;
          flex-direction: row;
          margin-top: 10px;
          align-items: center;

          .item-name {
            font-size: 14px;
            margin-right: 10px;
          }

          .item-box {
            border: $darkGray 1px solid;
            color: $darkGray;
            font-size: 14px;
            border-radius: 5px;
            height: 30px;
            width: 180px;
            margin-right: 20px;
          }

          .item-search {
            font-size: 14px;
            border-radius: 5px;
            height: 25px;
            width: 50px;
            border: $orange 1px solid;
            color: $orange;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }

        .search-list {
          margin-top: 20px;

          .name-item {
            flex-direction: row;
            height: 40px;

            .name-color {
              color: $darkGray;
            }

            .search-name {
              padding-left: 20px;
            }

            .search-name2 {
              padding: 30px 0 0 20px;

              .search-age {
                display: flex;

                .age-color {
                  color: #999;
                }
              }
            }

            .search-name3 {
              font-weight: bold;
              height: 30px;
              padding-left: 20px;

              .search-btn {
                .btn-block {
                  font-size: 26px;
                  cursor: pointer;
                }
              }
            }

            .option-type {
              width: 15px;
              height: 15px;
            }
          }

          .list-item {
            font-weight: 14px;

            .work-name {
              display: flex;
              flex-direction: row;
            }

            .info-item {
              display: flex;
              flex-direction: row;
            }
          }
        }
      }
    }
  }
}
</style>
